<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>vue基础知识</title>

    <style>
        .aa{
            width: 200px;
            height: 200px;
            border: 10px red solid;
        }
    </style>
</head>
<body>
    <div id="app">

        <h1>{{count}}</h1>
        <button @click="add">点我加一</button>
        <button v-on:click="add2(10)">点我加十</button>
        <a @mousemove="add2(10)">点我加十</a>

        <div v-bind:class="cls"></div>
        <div :class="cls"></div>
        <input type="text" v-model="count">

    </div>
</body>
</html>

<script src="js/vue.js"></script>

<script>
    new Vue({
        el:"#app",
        data:{
            msg:"小明",
            name:"<h2>小红</h2>",
            age:"",
            count:10,
            user:{id:1,name:"小黑",age:12},
            users:[1,2,3,4,5],
            userList:[{id:1,name:"小黑",age:12},{id:2,name:"小白",age:12},{id:3,name:"小花",age:12},],
            cls:"aa"
        },
        methods:{
            add(){
                this.count+=1;
            },
            add2(count){
                this.count+=count;
            },
            update(count){
                this.count=count
            }
        }
    })
</script>
